<template>
  <div class="right_height">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">权限管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <PersonMenu></PersonMenu>
  </div>
  <div class="right_body">
    <el-tabs type="border-card">
      <el-tab-pane label="菜单权限">
        <el-card>
          <div class="flex page-header">
            <el-button type="primary" @click="addCustomerInfo">
              <el-icon>
                <Plus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-dialog v-model="customerInfoDialog" :title="title == 'add' ? '新增角色信息' : '修改角色信息'"
              @close="closeDialog(ruleFormRef)" width="30%" draggable align="center">
              <el-card shadow="never">
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" label-width="120px" status-icon>
                  <el-form-item v-if="flag" label="ID：" prop="custId">
                    {{ ruleForm.custId }}
                  </el-form-item>
                  <el-form-item v-if="flag" label="编号：" prop="custNum">
                    {{ ruleForm.custNum }}
                  </el-form-item>
                  <el-form-item label="姓名：" prop="custName" :rules="{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur'
                  }">
                    <el-input v-model="ruleForm.custName" placeholder="请输入姓名" clearable />
                  </el-form-item>
                  <el-form-item label="性别：" prop="custSex" :rules="{
                    required: true,
                    message: '请输入性别',
                    trigger: 'change'
                  }">
                    <el-radio-group v-model="ruleForm.custSex">
                      <el-radio label="男" />
                      <el-radio label="女" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="联系人：" prop="custContacts" :rules="{
                    required: true,
                    message: '请输入联系人',
                    trigger: 'blur',
                  }">
                    <el-input v-model="ruleForm.custContacts" placeholder="请输入联系人" clearable />
                  </el-form-item>
                  <el-form-item label="联系方式：" prop="custPhone" :rules="{
                    required: true,
                    message: '请输入联系方式',
                    trigger: 'blur',
                  }">
                    <el-input v-model="ruleForm.custPhone" placeholder="请输入联系方式" clearable />
                  </el-form-item>
                  <el-form-item label="现居城市：" prop="townId" :rules="{
                    required: true,
                    message: '请选择现居城市',
                    trigger: 'change',
                  }">
                    <el-select v-model="ruleForm.townId" filterable no-match-text="无匹配数据" no-data-text="暂无数据"
                      placeholder="请选择现居城市" @click="selCity">
                      <el-option v-for="item in selData" :key="item.townId" :label="item.townName"
                        :value="item.townId" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="地址：" prop="custAddress" :rules="{
                    required: true,
                    message: '请输入地址',
                    trigger: 'blur'
                  }">
                    <el-input v-model="ruleForm.custAddress" placeholder="请输入地址" type="textarea" :rows="3" clearable />
                  </el-form-item>
                  <el-form-item v-if="flag" label="更新时间：" prop="updateTime">
                    {{ ruleForm.updateTime }}
                  </el-form-item>
                  <el-form-item v-if="(flag === false)">
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              <template #footer>
                <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="confirm(ruleFormRef)">确认</el-button>
              </template>
            </el-dialog>
            <el-button type="danger" @click="handleDelete" :disabled="sels.length === 0">批量删除</el-button>
            <el-form :inline="true" :model="tableDataSearch" class="demo-form-inline">
              <el-form-item>
                <el-input placeholder="请输入要查询的内容" v-model.trim="tableDataSearch.value">
                  <template #append>
                    <el-button :icon="Search" @click="search" />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="importBtn">
              <el-button type="success" @click="dialogVisible = true">
                <el-icon>
                  <Upload />
                </el-icon>
                <span>导入</span>
              </el-button>
              <el-dialog v-model="dialogVisible" title="导入Excel文件" width="30%" center>
                <el-upload :file-list="fileList" class="upload-demo" :before-upload="beforeUpload"
                  :on-success="handleSuccess" :on-error="handleError" auto-upload drag accept=".xls,.xlsx"
                  action="http://192.168.0.113:80/customer/upload">
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件到这里 或 <em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      文件大小不超过 2M
                    </div>
                  </template>
                </el-upload>
              </el-dialog>
            </div>
            <el-button type="primary" @click="exportExcel()">
              <el-icon>
                <Download />
              </el-icon>
              <span>导出</span>
            </el-button>
          </div>
          <!-- 角色信息列表 -->
          <div class="table">
            <el-table ref="tableRef" :data="tableData" :row-key="getKey" empty-text="暂无数据" class="width" align="center"
              @selection-change="selsChange">
              <el-table-column type="selection" width="30" :reserve-selection="true" />
              <el-table-column label="序号" type="index" :width="150" align="center" :data="tableDataIndex">
                <template #default="scope">
                  <span>{{
                      (tableDataIndex.pageNum - 1) * tableDataIndex.pageSize +
                      scope.$index +
                      1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="custNum" label="编号" align="center" />
              <el-table-column prop="custName" label="姓名" align="center" />
              <el-table-column prop="custSex" label="性别" align="center" />
              <el-table-column prop="custAddress" label="地址" align="center" show-overflow-tooltip />
              <el-table-column prop="custPhone" label="联系方式" align="center" />
              <el-table-column prop="updateTime" label="更新时间" sortable align="center" />
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" :icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
                  <el-button type="success" :icon="View" @click="handleView(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog v-model="customerInformations" title="角色信息详情" @close="closeDialog(ruleFormRef)" width="30%"
              draggable align="center">
              <el-card shadow="never">
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" label-width="120px" status-icon>
                  <el-form-item label="ID：" prop="custId">
                    {{ ruleForm.custId }}
                  </el-form-item>
                  <el-form-item label="编号：" prop="custNum">
                    {{ ruleForm.custNum }}
                  </el-form-item>
                  <el-form-item label="姓名：" prop="custName">
                    {{ ruleForm.custName }}
                  </el-form-item>
                  <el-form-item label="性别：" prop="custSex">
                    {{ ruleForm.custSex }}
                  </el-form-item>
                  <el-form-item label="联系人：" prop="custContacts">
                    {{ ruleForm.custContacts }}
                  </el-form-item>
                  <el-form-item label="联系方式：" prop="custPhone">
                    {{ ruleForm.custPhone }}
                  </el-form-item>
                  <el-form-item label="现居城市：" prop="townName">
                    {{ ruleForm.townName }}
                  </el-form-item>
                  <el-form-item label="地址：" prop="custAddress">
                    {{ ruleForm.custAddress }}
                  </el-form-item>
                  <el-form-item label="更新时间：" prop="updateTime">
                    {{ ruleForm.updateTime }}
                  </el-form-item>
                </el-form>
              </el-card>
              <template #footer>
                <el-button type="primary" @click="closeDialog(ruleFormRef)">确认</el-button>
              </template>
            </el-dialog>
            <el-pagination v-model:currentPage="config.page" :page-size="config.pageSize" small background
              layout="prev, pager, next" :total="config.total" :current-page="config.page"
              @current-change="changePage" />
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="操作权限">
        <el-card>
          <div class="flex page-header">
            <el-button type="primary" @click="addCustomerInfo">
              <el-icon>
                <Plus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-dialog v-model="customerInfoDialog" :title="title == 'add' ? '新增角色信息' : '修改角色信息'"
              @close="closeDialog(ruleFormRef)" width="30%" draggable align="center">
              <el-card shadow="never">
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" label-width="120px" status-icon>
                  <el-form-item v-if="flag" label="ID：" prop="custId">
                    {{ ruleForm.custId }}
                  </el-form-item>
                  <el-form-item v-if="flag" label="编号：" prop="custNum">
                    {{ ruleForm.custNum }}
                  </el-form-item>
                  <el-form-item label="姓名：" prop="custName" :rules="{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur'
                  }">
                    <el-input v-model="ruleForm.custName" placeholder="请输入姓名" clearable />
                  </el-form-item>
                  <el-form-item label="性别：" prop="custSex" :rules="{
                    required: true,
                    message: '请输入性别',
                    trigger: 'change'
                  }">
                    <el-radio-group v-model="ruleForm.custSex">
                      <el-radio label="男" />
                      <el-radio label="女" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="联系人：" prop="custContacts" :rules="{
                    required: true,
                    message: '请输入联系人',
                    trigger: 'blur',
                  }">
                    <el-input v-model="ruleForm.custContacts" placeholder="请输入联系人" clearable />
                  </el-form-item>
                  <el-form-item label="联系方式：" prop="custPhone" :rules="{
                    required: true,
                    message: '请输入联系方式',
                    trigger: 'blur',
                  }">
                    <el-input v-model="ruleForm.custPhone" placeholder="请输入联系方式" clearable />
                  </el-form-item>
                  <el-form-item label="现居城市：" prop="townId" :rules="{
                    required: true,
                    message: '请选择现居城市',
                    trigger: 'change',
                  }">
                    <el-select v-model="ruleForm.townId" filterable no-match-text="无匹配数据" no-data-text="暂无数据"
                      placeholder="请选择现居城市" @click="selCity">
                      <el-option v-for="item in selData" :key="item.townId" :label="item.townName"
                        :value="item.townId" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="地址：" prop="custAddress" :rules="{
                    required: true,
                    message: '请输入地址',
                    trigger: 'blur'
                  }">
                    <el-input v-model="ruleForm.custAddress" placeholder="请输入地址" type="textarea" :rows="3" clearable />
                  </el-form-item>
                  <el-form-item v-if="flag" label="更新时间：" prop="updateTime">
                    {{ ruleForm.updateTime }}
                  </el-form-item>
                  <el-form-item v-if="(flag === false)">
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              <template #footer>
                <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="confirm(ruleFormRef)">确认</el-button>
              </template>
            </el-dialog>
            <el-button type="danger" @click="handleDelete" :disabled="sels.length === 0">批量删除</el-button>
            <el-form :inline="true" :model="tableDataSearch" class="demo-form-inline">
              <el-form-item>
                <el-input placeholder="请输入要查询的内容" v-model.trim="tableDataSearch.value">
                  <template #append>
                    <el-button :icon="Search" @click="search" />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="importBtn">
              <el-button type="success" @click="dialogVisible = true">
                <el-icon>
                  <Upload />
                </el-icon>
                <span>导入</span>
              </el-button>
              <el-dialog v-model="dialogVisible" title="导入Excel文件" width="30%" center>
                <el-upload :file-list="fileList" class="upload-demo" :before-upload="beforeUpload"
                  :on-success="handleSuccess" :on-error="handleError" auto-upload drag accept=".xls,.xlsx"
                  action="http://192.168.0.113:80/customer/upload">
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件到这里 或 <em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      文件大小不超过 2M
                    </div>
                  </template>
                </el-upload>
              </el-dialog>
            </div>
            <el-button type="primary" @click="exportExcel()">
              <el-icon>
                <Download />
              </el-icon>
              <span>导出</span>
            </el-button>
          </div>
          <!-- 角色信息列表 -->
          <div class="table">
            <el-table ref="tableRef" :data="tableData" :row-key="getKey" empty-text="暂无数据" class="width" align="center"
              @selection-change="selsChange">
              <el-table-column type="selection" width="30" :reserve-selection="true" />
              <el-table-column label="序号" type="index" :width="150" align="center" :data="tableDataIndex">
                <template #default="scope">
                  <span>{{
                      (tableDataIndex.pageNum - 1) * tableDataIndex.pageSize +
                      scope.$index +
                      1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="custNum" label="编号" align="center" />
              <el-table-column prop="custName" label="姓名" align="center" />
              <el-table-column prop="custSex" label="性别" align="center" />
              <el-table-column prop="custAddress" label="地址" align="center" show-overflow-tooltip />
              <el-table-column prop="custPhone" label="联系方式" align="center" />
              <el-table-column prop="updateTime" label="更新时间" sortable align="center" />
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" :icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
                  <el-button type="success" :icon="View" @click="handleView(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog v-model="customerInformations" title="角色信息详情" @close="closeDialog(ruleFormRef)" width="30%"
              draggable align="center">
              <el-card shadow="never">
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="left" label-width="120px" status-icon>
                  <el-form-item label="ID：" prop="custId">
                    {{ ruleForm.custId }}
                  </el-form-item>
                  <el-form-item label="编号：" prop="custNum">
                    {{ ruleForm.custNum }}
                  </el-form-item>
                  <el-form-item label="姓名：" prop="custName">
                    {{ ruleForm.custName }}
                  </el-form-item>
                  <el-form-item label="性别：" prop="custSex">
                    {{ ruleForm.custSex }}
                  </el-form-item>
                  <el-form-item label="联系人：" prop="custContacts">
                    {{ ruleForm.custContacts }}
                  </el-form-item>
                  <el-form-item label="联系方式：" prop="custPhone">
                    {{ ruleForm.custPhone }}
                  </el-form-item>
                  <el-form-item label="现居城市：" prop="townName">
                    {{ ruleForm.townName }}
                  </el-form-item>
                  <el-form-item label="地址：" prop="custAddress">
                    {{ ruleForm.custAddress }}
                  </el-form-item>
                  <el-form-item label="更新时间：" prop="updateTime">
                    {{ ruleForm.updateTime }}
                  </el-form-item>
                </el-form>
              </el-card>
              <template #footer>
                <el-button type="primary" @click="closeDialog(ruleFormRef)">确认</el-button>
              </template>
            </el-dialog>
            <el-pagination v-model:currentPage="config.page" :page-size="config.pageSize" small background
              layout="prev, pager, next" :total="config.total" :current-page="config.page"
              @current-change="changePage" />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import {
  Search,
  Edit,
  // Delete,
  View,
} from "@element-plus/icons-vue";
import PersonMenu from "@/components/PersonMenu.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import httpHelper from "@/api/httpHelper.js";
import utils from "@/utils/utils.js";

let { proxy } = getCurrentInstance();
const ruleFormRef = ref();
const ruleForm = reactive({
  custId: '', // ID
  townId: '',
  townName: '', // 现居城市
  custAddress: '', // 地址
  custContacts: '', // 联系人
  custName: '', // 姓名
  custSex: '', // 性别
  custNum: '', // 编号
  custPhone: '', // 联系方式
  updateTime: '', // 更新时间
});

/* 重置和校验按钮 */
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields();
};
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('正确!');
    } else {
      console.log('信息错误!', fields);
    }
  });
};

/* 存储加载到的客户信息数据 */
const tableData = reactive([]);
const tableDataIndex = ref([]);
const tableRef = ref([]);

/* 分页处理 */
const config = reactive({
  total: 0, // 数据总数
  page: 1, // 默认页码为1
  pageSize: 8, // 默认一页显示8条
});
const changePage = () => {
  loadCustomerInfo(config);
};
onMounted(() => {
  loadCustomerInfo(config);
});

/* 加载客户信息数据 */
const loadCustomerInfo = (config) => {
  let pageNum = config.page;
  let pageSize = config.pageSize;
  utils.showLoading();
  httpHelper.get(
    "/customer/findAll",
    {
      params: {
        pageNum,
        pageSize,
      },
    },
    (res) => {
      console.log(res);
      utils.hideLoading();
      if (tableData.length <= 0) {
        tableData.push(...res.data.data.customers.list);
        tableDataIndex.value = res.data.data.customers;
        tableData.forEach((item) => {
          item.updateTime = item.updateTime.replace('T', ' ').replace('.000+00:00', '');
        });
      } else {
        let list = res.data.data.customers.list;
        let length = res.data.data.customers.pageSize;
        tableData.splice(0, length, ...list);
        tableDataIndex.value = res.data.data.customers;
        tableData.forEach((item) => {
          item.updateTime = item.updateTime.replace('T', ' ').replace('.000+00:00', '');
        });
      }
      selCity();
      config.total = res.data.data.customers.total;
      config.page = res.data.data.customers.pageNum;
    },
    (error) => {
      console.log('加载客户信息出错了' + error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};
// 现居城市(下拉框)
let selData = reactive([]);
const selCity = () => {
  httpHelper.get(
    "/customer/findTown",
    {},
    (res) => {
      // console.log(res);
      utils.hideLoading();
      if (selData.length <= 0) {
        selData.push(...res.data.data.towns);
      } else {
        selData = [];
        selData.push(...res.data.data.towns);
      }
    },
    (error) => {
      console.log('下拉框出错了' + error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};
/* 导入导出EXcel文件 */
// 导入
const dialogVisible = ref(false);
const fileList = ref([]);
// 限制文件类型和大小
const beforeUpload = (file, fileList) => {
  console.log('beforeUpload', file, fileList);
  if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && file.type !== 'application/vnd.ms-excel') {
    utils.showWarning('只能上传 xls 或 xlsx 格式的文件，请重试！');
    return false;
  } else if (file.size / 1024 / 1024 > 2) {
    utils.showWarning('文件大小不能超过 2M！')
    return false;
  }
  return true;
};
// 处理上传的数据
const handleSuccess = (res, fileList) => {
  console.log(res, fileList);
  utils.showSuccess(res.message);
  dialogVisible.value = false;
  loadCustomerInfo(config);
};
const handleError = (res) => {
  utils.showError(res.message);
  dialogVisible.value = false;
};

// 导出
const exportExcel = () => {
  let ids = arr;
  window.location.href = 'http://192.168.0.113:80/customer/download?ids=' + ids;
  // 导出后清空用户的选择
  tableRef.value.clearSelection();
};
// 表单跨页
const getKey = (row) => {
  return row.custId;
};

/* 区分新增和修改客户信息 */
const customerInfoDialog = ref(false);
const title = ref("add");
const flag = ref(false);
// 修改
const handleEdit = (row) => {
  flag.value = true;
  title.value = "edit";
  customerInfoDialog.value = true;
  proxy.$nextTick(() => {
    // 浅拷贝
    Object.assign(ruleForm, row);
  });
};
// 新增
const addCustomerInfo = () => {
  flag.value = false;
  title.value = "add";
  customerInfoDialog.value = true;
};

// 确认添加和确认修改
const confirm = (formEl) => {
  if (title.value == "add") {
    let townId = ruleForm.townId;
    let custName = ruleForm.custName;
    let custSex = ruleForm.custSex;
    let custContacts = ruleForm.custContacts;
    let custPhone = ruleForm.custPhone;
    let custAddress = ruleForm.custAddress;
    if (
      townId == '' ||
      custName == '' ||
      custContacts == '' ||
      custSex == '' ||
      custPhone == '' ||
      custAddress == ''
    ) {
      submitForm(formEl);
      utils.showError("必填项不能为空，请重试！");
    } else {
      httpHelper.post(
        "/customer/insert",
        {
          townId,
          custName,
          custSex,
          custContacts,
          custPhone,
          custAddress,
        },
        (res) => {
          console.log(res);
          if (res.data.result) {
            utils.showSuccess(res.data.message);
            customerInfoDialog.value = false;
          } else {
            utils.showError(res.data.message);
            submitForm(formEl);
          }
          loadCustomerInfo(config);
        },
        (error) => {
          console.log('确认添加出错了' + error);
          utils.hideLoading();
          utils.showError("不好意思，出错了，请联系管理员!");
        }
      );
    }
  } else {
    let custId = ruleForm.custId;
    let townId = ruleForm.townId;
    let custSex = ruleForm.custSex;
    let custName = ruleForm.custName;
    let custContacts = ruleForm.custContacts;
    let custPhone = ruleForm.custPhone;
    let custAddress = ruleForm.custAddress;
    if (
      townId == '' ||
      custName == '' ||
      custContacts == '' ||
      custSex == '' ||
      custPhone == '' ||
      custAddress == ''
    ) {
      utils.showError("必填项不能为空，请重试！");
      submitForm(formEl);
    } else {
      httpHelper.put(
        "/customer/update",
        {
          custId,
          townId,
          custName,
          custSex,
          custContacts,
          custPhone,
          custAddress,
        },
        (res) => {
          console.log(res);
          if (res.data.result) {
            utils.showSuccess(res.data.message);
            customerInfoDialog.value = false;
          } else {
            utils.showError(res.data.message);
            submitForm(formEl);
          }
          loadCustomerInfo(config);
        },
        (error) => {
          console.log('确认修改出错了' + error);
          utils.hideLoading();
          utils.showError("不好意思，出错了，请联系管理员!");
        }
      );
    }
  }
};
// 查看详情
const customerInformations = ref(false);
const handleView = (row) => {
  customerInformations.value = true;
  proxy.$nextTick(() => { // 浅拷贝
    Object.assign(ruleForm, row);
  });
};

// 取消、关闭
const closeDialog = (formEl) => {
  customerInfoDialog.value = false;
  customerInformations.value = false;
  resetForm(formEl);
};

/* 查询 */
const tableDataSearch = reactive({
  custNum: "",
  custName: "",
  custSex: "",
  custAddress: "",
  custPhone: "",
});
const search = () => {
  utils.showLoading();
  let data = tableDataSearch.value;
  console.log(data);
  let pageNum = config.page;
  let pageSize = config.pageSize;
  httpHelper.get(
    "/customer/findLike",
    {
      params: {
        data,
        pageNum,
        pageSize,
      }
    },
    (res) => {
      console.log(res);
      utils.hideLoading();
      if (res.data.result === false) {
        utils.showError(res.data.message);
      }
      let list = res.data.data.customers.list;
      let length = res.data.data.customers.pageSize;
      tableData.splice(0, length, ...list);
      tableData.forEach((item) => {
        item.updateTime = item.updateTime.replace('T', ' ').replace('.000+00:00', '');
      });
      tableDataSearch.value = '';
      config.total = res.data.data.customers.total;
      config.page = res.data.data.customers.pageNum;
    },
    (error) => {
      console.log('查询出错了' + error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};

// 客户信息列表的选中
let sels = ref([]);
let arr = reactive([]);
const selsChange = (val) => {
  sels.value = val;
  if (sels.value.length === 0) {
    val.forEach((item) => {
      arr.push(item.custId);
    });
  } else {
    arr = [];
    val.forEach((item) => {
      arr.push(item.custId);
    });
  }
};

/* 批量删除 */
const handleDelete = () => {
  let pageNum = config.page;
  let pageSize = config.pageSize;
  let ids = arr;
  // utils.showLoading();
  httpHelper.Delete(
    "/customer/delete",
    {
      data: { pageNum, pageSize, ids },
    },
    (res) => {
      console.log(res);
      if (res.data.flag) {
        utils.showSuccess(res.data.message);
      } else {
        utils.showError(res.data.message);
      }
      loadCustomerInfo(config);
    },
    (error) => {
      console.log('删除出错了' + error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};
</script>

<style lang="less" >
.right_height {
  background-color: #dee1e6;
  overflow: hidden;
}

.el-breadcrumb {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  width: 20%;
  float: left;
}

.page-header {
  .el-button--danger {
    margin-left: 12px !important;
  }

  .demo-form-inline {
    margin-left: 12px;
  }

  .el-form-item,
  .importBtn {
    margin-right: 10px;
  }

}

.el-popper {
  display: none;
}

.el-form-item__content {
  text-align: left;
}

.flex {
  display: flex;
}

.width {
  width: 100%;
}

.margin {
  margin-left: 20px;
}

.table {
  width: 100%;
}
</style>
